<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <script type="text/javascript">
        var ctx = "${pageContext.request.contextPath}";
    </script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap4b2/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/open-iconic-master/font/css/open-iconic-bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/custom/bookmark.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
        * {
            -webkit-border-radius: 0 !important;
            -moz-border-radius: 0 !important;
            border-radius: 0 !important;
        }
        .ztree * {font-size: 1rem;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
        .ztree li ul{ margin:0; padding:0}
        .ztree li {line-height:25px;}
        .ztree li a {width:100%; height:25px;padding-top: 0px;}
        .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
        .ztree li a span.button.switch {visibility:hidden}
        .ztree.showIcon li a span.button.switch {visibility:visible}
        .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:20px;}
        .ztree li span {line-height:25px;}
        .ztree li span.button {margin-top: 2px;}
        .ztree li span.button.switch {width: 16px;height: 16px;}

        .ztree li a.level0 span {font-size: 100%;font-weight: bold;}
        .ztree li span.button {background-image:url("/zTree_v3-master/left_menuForOutLook.png"); *background-image:url("/zTree_v3-master/left_menuForOutLook.gif")}
        .ztree li span.button.switch.level0 {width: 20px; height:25px}
        .ztree li span.button.switch.level1 {width: 20px; height:25px}
        .ztree li span.button.noline_open {background-position: 0 0;}
        .ztree li span.button.noline_close {background-position: -18px 0;}
        .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
        .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
    </style>
    <title>在线书签</title>
</head>

<body>

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Dashboard</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#"><span class="oi oi-home" title="home page" aria-hidden="true"></span>Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="oi oi-bookmark" title="bookmark" aria-hidden="true"></span>Bookmark</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="oi oi-calendar" title="calendar" aria-hidden="true"></span>Calendar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="oi oi-audio" title="" aria-hidden="true"></span>Help</a>
                </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>

    </nav>
</header>

<div class="container-fluid">
    <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
            <div class="row">
                <div class="col-12 text-right">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#newModel">
                        <span class="oi oi-plus" title="Add new bookmark" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <a class="nav-link" href="#">临时收纳箱</a>
                </div>
            </div>

            <ul id="tree" class="ztree nav nav-pills flex-column"></ul>

            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav item again111111111</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">One more nav</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
            </ul>


            <div class="bg-info" style="position: absolute; bottom: 10px; height: 60px; width: 100%;">
                底部
            </div>
        </nav>

        <!-- 右边主题部分-->
        <main role="main" class="col-sm-9 ml-sm-auto col-md-10">
            <div class="row">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">MY TOPICS</a></li>
                    <li class="breadcrumb-item"><a href="#">WORLD</a></li>
                    <li class="breadcrumb-item">LOCAL</li>
                    <li class="breadcrumb-item active">US</li>
                </ol>
            </div>

            <h3>Dashboard</h3>
            <ol id="bookmarks">


            </ol>
        </main>
    </div>
</div>


<!-- 新增对话框-->
<div class="modal fade" id="newModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add new bookmark in <span id="curCatalog"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="createBookmarkForm" action="${pageContext.request.contextPath}/createBookmark" method="post">
                    <fieldset class="form-group">
                        <label for="url">Please enter URL</label>
                        <input type="text" class="form-control" id="url" placeholder="Enter url">
                        <input type="hidden" id="catalog_id">
                        <%--<small class="text-muted hide">We'll never share your email with anyone else.</small>--%>
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="note">Note</label>
                        <textarea class="form-control" id="note" rows="3"></textarea>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="createBookmark()">Save</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 对话框结束 -->
<%--<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>--%>
<%--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>--%>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="/bootstrap4b2/js/bootstrap.bundle.js"></script>
<script src="/zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript" ></script>
<script src="/zTree_v3-master/js/jquery.ztree.exedit.js" type="text/javascript" ></script>

<script type="text/javascript">
    function createBookmark() {
        var $form = $("#createBookmarkForm");
        var url = $("#url").val();
        if (url == null || $.trim(url).length ==0) {
            alert("url必填");
            return false;
        }
        var data = {
            url: $("#url").val(),
            catalog: {id: $("#catalog_id").val()},
            note: $("#note").val()
        };
        var datas = "{\"url\":\"" + $("#url").val() + "\", \"catalog_id\": \"" + $("#catalog_id").val() + "\", \"note\": \"" + $("#note").val() + "\"}";
        alert(JSON.stringify(data));
        $('#newModel').modal('hide');
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/createBookmark",
            data:JSON.stringify(data),
            dataType: "json",
            contentType: 'application/json',
            success: function(data){
                $('#url').empty(); //清空resText里面的所有内容
                $('#newModel').modal('hide');
                var html = '';
                alert(JSON.stringify(data));

                $('#resText').html(html);
            },
            error: function (data) {
                alert(JSON.stringify(data));
            }
        });
        //$("#createBookmarkForm").submit();

    }

</script>


</body>
<SCRIPT type="text/javascript" >
    <!--
    var zTree;
    var demoIframe;
    var setting = {
        view: {
            showLine: false,
            showIcon: true,
            selectedMulti: false,
            dblClickExpand: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid"
            }
        },
        callback: {
            beforeClick: beforeClick
        }
        /*
         data: {
         simpleData: {
         enable:true,
         idKey: "id",
         pIdKey: "pId",
         rootPId: ""
         }
         },
         callback: {
         beforeClick: function(treeId, treeNode) {
         var zTree = $.fn.zTree.getZTreeObj("tree");
         if (treeNode.isParent) {
         zTree.expandNode(treeNode);
         return false;
         } else {
         demoIframe.attr("src",treeNode.file + ".html" );
         return true;
         }
         }
         }*/
    };

    var zNodes = JSON.parse('${datastr}');
    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);

        if (treeNode.level > 1) {
            var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
            switchObj.before(spaceStr);
        }
    }
    function beforeClick(treeId, treeNode) {
        if (treeNode.level >= 0 ) {
//            alert(treeNode.id);
            $("#catalog_id").val(treeNode.id);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.expandNode(treeNode);
            //demoIframe.attr("src",treeNode.file + ".html" );

            getBookmarks(treeNode.id);
            return false;
        }
        return true;
    }

    function getBookmarks(id) {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/v1/catalogs/" + id + "/bookmarks",
            contentType: 'application/json',
            success: function(data){
                $('#url').empty(); //清空resText里面的所有内容
                alert(JSON.stringify(data));

                var html = "";
                $.each(data, function (index, value) {
                    html += '<li>'+ index + '<a href="' + value.url + '" target="_blank">'+ value.title + '</a><br><div>' + value.describe + '</div></li>';
                });

                $('#bookmarks').html(html);
            },
            error: function (data) {
                alert(JSON.stringify(data));
            }
        });

    }
    $(document).ready(function(){
        var t = $("#tree");
        $.fn.zTree.init(t, setting, zNodes);
        //demoIframe = $("#testIframe");
        //demoIframe.bind("load", loadReady);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.expandAll(true); //默认打开所有节点

        //curMenu = zTree.getNodes()[0].children[0];
        //zTree.selectNode(curMenu);

        t.hover(function () {
            if (!t.hasClass("showIcon")) {
                t.addClass("showIcon");
            }
        }, function() {
            t.removeClass("showIcon");
        });

        zTree.selectNode(zTree.getNodeByParam("id", 101));
    });
    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
            htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
            maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
            h = demoIframe.height() >= maxH ? minH:maxH ;
        if (h < 530) h = 530;
        demoIframe.height(h);
    }
    //-->
</SCRIPT>

</html>